<template>
  <div class="editor">
    <div class="comment-title" v-if="reply">
      <span class="pull-right" @click="cancel">取消回复</span>
    </div>
    <div>
      <div class="comment"><textarea class="comment-area" v-model="temp.content" placeholder="既然来了，留点什么吧..." /></div>
      <div class="comment"><button class="button-submit" @click="submit"><span class="iconfont">&#xe6e3;</span> 提交留言</button></div>
      <div class="comment contact">
        <h4 class="d-none d-sm-block">Hi，您需要填写昵称和邮箱！</h4>
        <div class="split-line d-none d-sm-block"></div>
        <ul class="contact-ul pl-sm-5">
          <li>
            <!-- <input class="ipt" type="text" v-model="temp.nickName" placeholder="昵称"/> -->
            <el-input class="ipt" type="text" size="mini" v-model="temp.nickName" placeholder="昵称" />
            <label>昵称 (必填)</label>
          </li>
          <li>
            <!-- <input class="ipt" type="text" v-model="temp.email" placeholder="邮箱"/> -->
            <el-input class="ipt" type="text" size="mini" v-model="temp.email" placeholder="邮箱" />
            <label>邮箱 (必填)</label>
          </li>
          <li>
            <!-- <input class="ipt" type="text" v-model="temp.link" placeholder="网址"/> -->
            <el-input class="ipt" type="text" size="mini" v-model="temp.link" placeholder="网址" />
            <label>网址</label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Editor',
  props: {
    reply: Boolean,
    content: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      temp: {
        nickName: '',
        email: '',
        link: '',
        content: ''
      }
    }
  },
  watch: {
    'content': function (newContent) {
      this.temp.content = newContent
    }
  },
  mounted () {
    this.temp.content = this.content
  },
  methods: {
    cancel () {
      this.$emit('change')
    },
    submit () {
      if (this.temp.content === null || this.temp.content === undefined || this.temp.content === '') {
        this.$notify({
          title: '错误提示',
          message: '评论内容不能为空',
          type: 'error'
        })
        return
      } else if (this.temp.nickName === null || this.temp.nickName === undefined || this.temp.nickName === '') {
        this.$notify({
          title: '错误提示',
          message: '昵称不能为空',
          type: 'error'
        })
        return
      } else if (this.temp.email === null || this.temp.email === undefined || this.temp.email === '') {
        this.$bvToast.toast(`邮箱不能为空`, {
          title: `错误提示`,
          toaster: 'b-toaster-top-right',
          solid: true,
          variant: 'danger',
          appendToast: false
        })
        this.$notify({
          title: '错误提示',
          message: '邮箱不能为空',
          type: 'error'
        })
        return
      } else if (this.temp.email !== undefined) {
        var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (!reg.test(this.temp.email)) {
          this.$notify({
            title: '错误提示',
            message: '邮箱格式有误，请重新检查',
            type: 'error'
          })
          return
        }
      }
      this.$emit('submit', this.temp)
    }
  }
}
</script>

<style  lang="stylus">
  .el-input--mini .el-input__inner
    width 200px
</style>

<style scoped lang="stylus">
  input, textarea
    padding: 5px 6px 3px;
    font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;

  .editor
    width 100% !important
    .comment-title
      display flex
      justify-content flex-end
      line-height 30px
      border-bottom 1px solid #eee
      margin-bottom 20px
      cursor pointer
      .pull-right
        display inline-block
        padding 0 4px
        border-radius 2px
      .pull-right:hover
        background #D9D9D9
    .comment
      .comment-area
        display: block
        width: 100%
        height: 110px
        min-height: 30px
        -webkit-box-sizing: border-box
        -moz-box-sizing: border-box
        box-sizing: border-box
        background-color #fff
        border: 1px solid #D9D9D9
        border-top-color #C0C0C0
        border-left-color #d0d0d0
        -webkit-transition border linear .2s
        -moz-transition border linear .2s
        transition border linear .2s
        margin-bottom: 5px;
        font-size 14px
      .button-submit
        height 40px
        line-height 20px
        width 100%
        display inline-block
        padding 6px 12px 4px
        text-align center
        vertical-align middle
        cursor pointer
        color #777
        font-size 15px!important
        border 1px solid #eee
        background: #f8f8f8
      .button-submit:hover
        color #444
        background #f8f8f8
        border 1px solid #DBDBDB
      h4
        float: left;
        font-size: 12px;
        line-height: 100px;
        margin-right: 40px;
        text-align: right;
        font-weight bold
      .split-line
        border-left: dotted 1px #ccc
      .contact-ul
        margin-bottom 0
        li
          margin-bottom: 10px
          display flex
          justify-content center
          .ipt
            margin-right 10px
            line-height 20px
            color #555555
            // border 1px solid #D9D9D9
            font-size 12px
          .ipt::selection
            border: 1px solid #999;
          .ipt::-moz-selection
            border: 1px solid #999;
          label
            font-size 12px
            width 100% !important
            margin-top 6px
    .contact
      display flex
      flex-flow row
      justify-content center
      padding: 20px 0 0 0px
</style>
